<template>
  <div>
    <vHeader>歌单详情</vHeader>
    <div v-if="songsObj.picUrl">
      <div class="imgwrapper">
        <img :src="songsObj.picUrl" width="100%" @load="imageLoaded" ref="bgImg" />
      </div>
      <div class="listsWrapper" :style="{height:`${wrapperHeight}px`}" ref='listsWrapper'>
        <div
          class="songsLists"
          :style="{marginTop:`${listsHeight}px`}"
          @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
          ref="songLists"
        >
          <ul class="listsWrapper">
            <li v-for="(item, index) in songsLists" :key="index">
              <p>
                <span class="name">{{index+1}} . {{item.name}}</span>
                <span>
                  <svg class="icon" aria-hidden="true" @click="openSongsByid(item.id)">
                    <use xlink:href="#icon-bofang1" />
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <!-- Todos  添加歌曲到自定义列表 -->
                    <use xlink:href="#icon-xinjiqimao" />
                  </svg>
                </span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from "../../components/Header/Header";
// import { parse } from "path";
// import { log } from 'util';
export default {
  components: {
    vHeader
  },
  data() {
    return {
      listsHeight: 200,
      lastPosY: 0,
      curPosY: 0,
      diff: 0,
      BannerHeight: 0,
      wrapperHeight:0
    };
  },
  methods: {
    imageLoaded(e) {
      if (this.BannerHeight > 0) {
        return;
      }
      this.BannerHeight = e.target.clientHeight;
    },
    touchstart(e) {
      //执行定义在拖动开始时须执行的函数， 参数为即将拖动的元素
      //初始化拖动元素的位置信息；
      this.lastPosY = e.targetTouches[0].clientY;
      // this.dragW = tar.offsetWidth || tar.clientWidth;
      // this.dragH = tar.offsetHeight || tar.clientHeight;
    },
    touchmove(e) {
      this.curPosY = e.targetTouches[0].clientY;
      // 计算差值
      this.diff = +(this.curPosY - this.lastPosY);
      let scale = this.diff / this.BannerHeight;
      if (this.diff > 0 &&this.$refs.listsWrapper&&this.$refs.listsWrapper.scrollTop ==0) {
        e.preventDefault()
        if (this.diff <= 150) {
          this.$refs.bgImg.style.transform = `scale(${1 + scale})`;
          this.$refs.songLists.style.transform = `translateY(${this.diff}px)`;
        } else {
        }
      } else {
        return;
      }
    },
    touchend() {
      this.$refs.bgImg.style.transform = `scale(1)`;
      this.$refs.songLists.style.transform = `translateY(0px)`;
    },
    openSongsByid(id) {
      this.$store.dispatch("checkedSongs", id);
    }
  },
  computed: {
    songsLists() {
      return this.$store.getters.getSingerPageLists;
    },
    songsObj() {
      return this.$store.getters.getSingerPageObj;
    }
  },
    mounted() {
    this.wrapperHeight =
      document.documentElement.clientHeight;
  }
};
</script>

<style scoped lang="stylus">
.icon {
  width: 45px;
  height: 45px;
}
svg 
    margin-right 5px
    margin-top 2px
.imgwrapper
    position fixed
    z-index -1
    top 0
    left 0
.listsWrapper
    height 100%
    overflow scroll
.songsLists
    padding-top 40px
    border-radius 40px 40px 0px 0px 
    background rgba(27,163,223,1)
.listsWrapper
    height 100%
    .listsWrapper
            li
                height 50px
                width 100%
                margin 5px 0px
                background rgba(233,233,216,0.2)
                border-bottom 1px dashed #fff
                p
                    background rgba(233,233,216,0.4)
                    display flex
                    justify-content space-between
                    margin 0 auto
                    width 90%
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    color rgb(90,46,1)
                    font-size 18px
                    font-weight 700
                    padding-left 20px
                    vertical-align:middle
                    .name 
                        display inline-block
                        height 30px
                        // width 50%
                        white-space nowrap
                        overflow hidden
                        text-overflow ellipsis
                        position relative
                        top 15px
                        // vertical-align:middle
</style>